<template>
    <view class='container'>
        <block v-if="token">
            <!-- 有商品列表 -->
            <view class="goodsList" v-if="cartList.length">

                <u-swipe-action>
                    <u-swipe-action-item @click="delCheck(item)" :options="options" v-for="item in cartList"
                        :key="item.id">
                        <view class="a-goods">
                            <view class='content'>
                                <!-- 有库存且在售(item.is_on_sale=1)才可以讨论勾不勾选 -->
                                <view v-if="item.number>0&&item.is_on_sale===1" class="checkbox">
                                    <!-- 选中状态-->
                                    <image @click="changeCheck(item)" v-if="item.checked" class="checkbox-img"
                                        src="/static/images/icon/gou-red.png"></image>
                                    <!-- 未选中状态 -->
                                    <image @click="changeCheck(item)" v-else class="checkbox-img"
                                        src="/static/images/icon/gou-gray.png"></image>
                                </view>
                                <!-- 没有库存，直接勾选灰色 -->
                                <image v-else src="/images/icon/gou-gray.png" class="checkbox"></image>
                                <view class="goods-info">
                                    <navigator class="goods-url" hover-class="none" url="">
                                        <view class="img-box">
                                            <image :src="item.list_pic_url" class="img" />
                                        </view>
                                        <view class="text-box">
                                            <view
                                                :class="item.number>0&&item.is_on_sale===1?'goods-title':'out-stock-title'">
                                                {{item.goods_name}}
                                            </view>
                                            <view class="goods-label">{{item.goods_specifition_name_value }}</view>
                                            <view class="goods-price">
                                                <view class='price-now'>￥{{item.retail_price}}</view>
                                            </view>
                                            <!-- 购买数量计算器 -->
                                            <view class="selnum" v-if="item.number>0&&item.is_on_sale===1">
                                                <view class="cut" @click="changeNum('reduce',item)">-</view>
                                                <input value="1" :value="item.number" class="number" disabled="true"
                                                    type="number" />
                                                <view class="add" @click="changeNum('add',item)">+</view>
                                            </view>
                                            <!-- 缺货描述 -->
                                            <view class="out-stock" v-else>暂时缺货</view>
                                        </view>
                                    </navigator>
                                </view>
                            </view>

                        </view>
                    </u-swipe-action-item>
                </u-swipe-action>
            </view>
            <!-- 没有商品信息 -->
            <view class="cart-empty-container" v-else>
                <view class='cart-empty-view'>
                    <image class='cart-empty' src='/static/images/icon/cart-empty.png'></image>
                </view>
                <view class='cart-empty-txt'>车里什么都没有，快去买一点吧</view>
                <view class="to-index-btn" @click="goUrl('/pages/index/index',false,true)">
                    去逛逛
                </view>
            </view>
        </block>
        <!-- 没有登录 -->
        <u-empty v-else mode="permission" marginTop="150" text="您还没有登录哦"></u-empty>
        <!-- 底部区域  判断是否有商品列表并且要登录-->
        <view class="settle-box" v-if="cartList.length&&token">
            <view class="left-price">
                <view class="all-selected">
                    <!-- 选中状态 -->
                    <image @click="changeCheckAll" v-if="isCheckAll" class="checkbox"
                        src="/static/images/icon/gou-red.png">
                    </image>
                    <!-- 未选中状态 -->
                    <image @click="changeCheckAll" v-else class="checkbox" src="/static/images/icon/gou-gray.png">
                    </image>
                    <view class="text">全选:{{checkedGoodsCount}}</view>
                </view>
                <view class="total">合计：¥{{checkedGoodsAmount}}</view>
            </view>
            <view class="to-pay-btn" @click="goCheck">去结算</view>
        </view>
    </view>
</template>

<script>
    import {
        mapState,
        mapActions,
        mapGetters,
        mapMutations
    } from 'vuex'
    import setBadge from '@/mixins/setBadge.js'
    export default {
        mixins: [setBadge],
        data() {
            return {
                options: [{
                    text: '删除',
                    style: {
                        backgroundColor: '#f56c6c'
                    }
                }]
            }
        },
        computed: {
            ...mapState('user', ['token']),
            //cartList购物车列表信息
            ...mapState('cart', ['cartList']),
            //checkedGoodsAmount选中的商品总价格 ,   checkedGoodsCount 选中的商品总数量
            ...mapGetters('cart', ['checkedGoodsAmount', 'checkedGoodsCount']),

            //1.控制全选
            isCheckAll() {
                return this.cartList.every(item => item.checked === 1)
            }

        },
        methods: {
            //getInitData()获取购物车数据
            ...mapActions('cart', ['getInitData']),
            ...mapMutations('cart', ['setCartData']),
            //1.购物车增减商品数数量
            async changeNum(type, row) {
                if (type === 'reduce' && row.number === 1) {
                    return uni.showToast({
                        title: '至少选1件商品',
                        icon: 'error'
                    })
                }
                this.cartList.number = type === 'add' ? row.number += 1 : row.number -= 1
                //发送请求
                const res = await uni.$http.post('/cart/update', {
                    goodsId: row.goods_id, // 商品ID
                    id: row.id, // 购物车记录id,
                    productId: row.product_id, // 产品ID
                    number: row.number // 数量
                })
                // console.log(res);
                //返回的是购物车列表，我们可以直接拿来更新vuex中的购物车数据
                this.$store.commit('cart/setCartData', res)
            },
            //2.单行数据的选中与取消
            async changeCheck(row) {
                const res = await uni.$http.post('/cart/checked', {
                    isChecked: row.checked === 1 ? 0 : 1,
                    productIds: row.product_id,
                })
                // console.log(res);
                //返回的是购物车列表，我们可以直接拿来更新vuex中的购物车数据
                // this.$store.commit('cart/setCartData', res)
                this.setCartData(res)
            },
            //3.全选
            async changeCheckAll() {
                const res = await uni.$http.post('/cart/checked', {
                    isChecked: this.isCheckAll === true ? 0 : 1,
                    productIds: this.cartList.map(item => item.product_id).join(',')
                })
                // console.log(res);
                //返回的是购物车列表， 我们可以直接拿来更新vuex中的购物车数据
                this.setCartData(res)
            },
            //4.删除商品
            async delCheck(row) {
                // console.log(row);
                //提示
                let result = await uni.showModal({
                    title: '确认删除吗',
                    icon: 'none'
                })
                // console.log(result);
                //判断是否点击了取消
                if (result.cancel === false) return
                //发请求
                const res = await uni.$http.post('/cart/delete', {
                    productIds: row.product_id
                })
                // console.log(res);
                //返回的是购物车列表， 我们可以直接拿来更新vuex中的购物车数据
                this.setCartData(res)
            },
            //5,点击结算
            goCheck() {
                //判断是否有选择商品
                const hasCheck = this.cartList.some(item => item.checked === 1)
                if (!hasCheck) {
                    return uni.showToast({
                        title: '请选择商品',
                        icon: 'error'
                    })
                }
                //跳转到订单页面 addType=0表示是从购物车页面过去的
                uni.navigateTo({
                    url: '/pkgOrder/checkout/checkout?addType=0'
                })
            }
        },
        //页面打开的时候触发
        onShow() {
            //1.获取购物车列表(判断是否登录了)
            if (this.token) this.getInitData()


        }
    }
</script>

<style lang="scss">
    page {
        height: 100%;
        background-color: #fafafa;
    }

    .container {
        justify-content: initial;
        margin-bottom: 100rpx;
    }

    .cart-empty-container {
        padding-top: 240rpx;
        margin-bottom: 40rpx;
    }

    .show {
        display: block;
    }

    .cart-empty-view {
        width: 110rpx;
        height: 110rpx;
        margin: 0 auto;
    }

    .cart-empty {
        width: 110rpx;
        height: 110rpx;
    }

    .cart-empty-txt {
        width: 100%;
        text-align: center;
        color: #999;
        font-size: 28rpx;
        margin: 40rpx 0;
    }

    .to-index-btn {
        color: #fff;
        background: linear-gradient(to right, #409eff, #4ebfdb);
        border-radius: 10rpx;
        width: 400rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        font-size: 28rpx;
        margin: 0 auto;
    }

    .goodsList {
        margin-bottom: 100rpx;
    }

    .a-goods {
        width: 100%;
        height: 240rpx;
        overflow: hidden;
        position: relative;
        background: #fff;
    }

    .content {
        width: 100%;
        margin-right: 0;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transform: translateX(90px);
        transform: translateX(90px);
        margin-left: -90px;
        height: 240rpx;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
    }

    .a-goods .checkbox {
        display: block;
        height: 40rpx;
        min-width: 40rpx;
        padding: 100rpx 40rpx;
    }

    .a-goods .checkbox .checkbox-img {
        height: 40rpx;
        width: 40rpx;
    }

    .goods-info {
        border-bottom: 1px solid #eee;
        width: 100%;
        padding: 30rpx 0 30rpx;
        box-sizing: border-box;
    }

    .a-goods:last-child .goods-info {
        border-bottom: none;
    }

    .goods-info .goods-url {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
    }

    .goods-info .img-box {
        width: 180rpx;
        height: 180rpx;
        overflow: hidden;
        margin-right: 20rpx;
        background-color: #fafafa;
    }

    .goods-info .text-box {
        width: 440rpx;
        position: relative;
    }

    .goods-info .text-box .goods-title {
        font-size: 30rpx;
        color: #233445;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 10rpx 20rpx 5rpx 0;
    }

    .goods-info .text-box .out-stock-title {
        font-size: 30rpx;
        color: #999;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 10rpx 20rpx 5rpx 0;
    }

    .goods-info .text-box .goods-label {
        font-size: 26rpx;
        color: #999;
        height: 38rpx;
        line-height: 38rpx;
        margin: 8rpx 0 25rpx 0;
    }

    /* .goods-info .text-box .goods-price{

} */

    .price-now {
        display: inline-block;
        font-size: 28rpx;
        color: #ff3456;
        margin-right: 10rpx;
    }

    .price-original {
        display: inline-block;
        color: #999;
        /* height: 40rpx; */
        font-size: 26rpx;
        /* float: left; */
        /* line-height: 44rpx; */
        text-decoration: line-through;
    }

    .goods-info .text-box .buy-num {
        width: 164rpx;
        height: 52rpx;
        line-height: 47rpx;
        position: absolute;
        right: 30rpx;
        bottom: 0;
        display: flex;
        /*justify-content: space-between;*/
        border: 1px solid #ccc;
        font-size: 26rpx;
        text-align: center;
    }

    .goods-info .text-box .out-stock {
        width: 164rpx;
        height: 52rpx;
        line-height: 52rpx;
        position: absolute;
        right: 30rpx;
        bottom: 0;
        border: 1px solid #fafafa;
        font-size: 26rpx;
        text-align: center;
        background: #fafafa;
    }

    .buy-num .minus-btn {
        width: 90rpx;
        height: 100%;
        text-align: center;
        line-height: 48rpx;
        color: #555;
        border-radius: 0;
        background: #fff;
        border: none;
        padding: 0;
    }

    .buy-num .number {
        width: 100rpx;
        height: 100%;
        text-align: center;
        line-height: 52rpx;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        float: left;
        font-size: 30rpx;
    }

    .buy-num .add-btn {
        width: 90rpx;
        height: 100%;
        text-align: center;
        line-height: 48rpx;
        color: #555;
        border-radius: 0;
        background: #fff;
        border: none;
        padding: 0;
    }

    button::after {
        border-radius: 0;
        border: none;
    }

    .goods-info .text-box .selnum {
        width: 146rpx;
        height: 52rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        right: 30rpx;
        bottom: 0;
    }

    .selnum .cut {
        width: 46rpx;
        height: 46rpx;
        font-size: 30rpx;
        color: #233445;
        background: #fff;
        padding: 0;
        margin: 0;
        text-align: center;
        line-height: 40rpx;
        border-radius: 46rpx;
        border: 1rpx solid #999;
        box-sizing: border-box;
        font-weight: bold;
    }

    .selnum .add {
        width: 46rpx;
        height: 46rpx;
        font-size: 32rpx;
        color: #fff;
        padding: 0;
        margin: 0;
        text-align: center;
        line-height: 42rpx;
        background: linear-gradient(to right, #ff3456, #ff347d);
        border-radius: 46rpx;
        box-sizing: border-box;
        font-weight: bold;
    }

    .selnum .number {
        width: 52rpx;
        height: 46rpx;
        font-size: 30rpx;
        color: #233445;
        text-align: center;
        line-height: 46rpx;
    }

    .goods-info .img-box .img {
        width: 180rpx;
        height: 180rpx;
    }

    .inner {
        position: absolute;
        top: 0;
    }

    .a-goods .delete-btn {
        background-color: #ff3456;
        width: 90px;
        height: 240rpx;
        text-align: center;
        line-height: 240rpx;
        color: #fff;
        -webkit-transform: translateX(90px);
        transform: translateX(90px);
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 30rpx;
    }

    .touch-move-active .content,
    .touch-move-active .delete-btn {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .settle-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        border-bottom: 1px solid #eee;
        border-top: 1px solid #eee;
        background-color: #fff;
    }

    .settle-box .to-pay-btn {
        width: 300rpx;
        text-align: center;
        line-height: 100rpx;
        background: linear-gradient(to right, #ff3456, #ff347d);
        font-size: 32rpx;
        color: #fff;
    }

    .settle-box .to-pay-btn.no-select {
        background-color: #ccc;
    }

    .settle-box .left-price {
        display: flex;
        width: 510rpx;
        /* justify-content: space-between; */
        line-height: 100rpx;
        padding: 0 30rpx 0 0;
        font-size: 28rpx;
        box-sizing: border-box;
    }

    .settle-box .all-selected {
        padding-left: 40rpx;
        color: #000;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .settle-box .all-selected .checkbox {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
    }

    .settle-box .total {
        color: #ff3456;
        float: left;
        margin-left: 10px;
    }
</style>
